<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令测试</title>
    <script src="../../js/vue.js"></script>
    <style>
        .active {
            width: 900px;
        }

        .active1 {
            height: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--
    功能:
        通过v-bind指令来控制dom元素的属性节点.
    说明:
        1. 指令格式: `v-bind:属性节点名称='vue中的值或者表达式获取值'`;
            - 简写格式: `:属性节点名称='vue中的值或者表达式获取值'`;
        2. 控制dom的class属性节点时, 可以在一个按钮上改变isActive的值来改变img的class信息.
            - 控制class的表达式有两种写法:
                1. 使用三元表达式;
                2. 使用对象的形式, 这种方式更推荐, 可以一次控制显示多个class信息.
    -->
    <img v-bind:src="imgSrc" v-bind:title="imgTitle" :class="isActive?'active':''" />
    <img v-bind:src="imgSrc" v-bind:title="imgTitle" :class="{active: !isActive, active1: isHeight}" />
    <button v-on:click="chooseFlag">切换isActive的值</button>

</div>
</body>
<script>

    let app = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            isActive: false,
            isHeight: true,
            imgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580545404549&di=8519ca28ff822fd453f7492c0bcc820c&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20160506%2Fef10a11e89c345b48a3bd0fcfcdbbc2a_th.png',
            imgTitle: '百度的图片'
        },
        methods: {
            chooseFlag: function () {
                this.isActive = !this.isActive;
            }
        }
    });

</script>
</html>